<template>
  <div id="approachDetail" style="position: relative;">
    <a-spin :spinning="spinning">
      <div class="form-btn">
        <!-- 如果是撤回和审核驳回，必须点击重新编辑才可以保存和重新提交 -->
        <a-button class="btn" type="primary" v-if="alias === 'edit' && ['dtj'].includes(billstatus) || (['chehui', 'no'].includes(billstatus) && isEdit)" @click="handleSubmit(1)">保存</a-button>
        <a-button class="btn" type="primary" v-if="alias === 'edit' && ['dtj'].includes(billstatus)" @click="handleSubmit(2)">提交</a-button>
        <a-button class="btn" type="primary" v-if="alias === 'edit' && isEdit" @click="handleSubmit(2)">重新提交</a-button>
        <a-button class="btn" type="primary" v-if="alias === 'aduit' && ['dsh'].includes(billstatus)" @click="visible = true">审核</a-button>
        <!-- <a-button class="btn" type="primary" v-if="alias !== 'aduit' && ['dsh'].includes(billstatus)" @click="handleCancel(form)">撤回</a-button> -->
        <a-button class="btn" type="primary" v-if="alias === 'edit' && ['chehui', 'no'].includes(billstatus) && !isEdit" @click="isEdit = true">重新编辑</a-button>
        <!-- <a-button class="btn" type="primary" v-if="['ok'].includes(billstatus)" @click="handlePush(form)">推送NC</a-button> -->
        <a-button class="btn" type="primary" @click="visiblePrinting = true" v-if="['ok','dsh'].includes(billstatus)">打印</a-button>
        <!--  -->
      </div>
      <div class="wrap">
        <div id="printJS-form">
          <div class="printJS-item" v-if="billstatus =='yszf'">
            <div class="infoTitle">验收作废说明</div>
            <div class="yszf_wrap">
              <div style="width:30%">操作人:{{form.approverName}}</div>
              <div>作废时间:{{form.yszfTime}}</div>
              <div style="width:100%">作废原因:{{form.approvenote}}</div>
            </div>
          </div>
          <div class="printJS-item">
            <a-form-model ref="form" :model="form" :label-col="{span: 8}" :wrapper-col="{span: 14}" >
              <div class="infoTitle">基础信息</div>
              <div class="form-row">
                <a-form-model-item label="申请单编号" class="form-col">
                  <a-input
                    v-model="form.phidApply"
                    placeholder="请输入单据编码"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="处理登记单" class="form-col">
                  <a-input
                    v-model="form.phidRegister"
                    placeholder="请输入处理登记单"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="组织" class="form-col">
                  <a-input
                    v-model="form.orgName"
                    placeholder="请输入组织"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="区域" class="form-col">
                  <a-input
                    v-model="form.complanyName"
                    placeholder="请输入区域"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="项目" class="form-col">
                  <a-input
                    v-model="form.projectName"
                    placeholder="请输入项目名称"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="进场单编号" class="form-col">
                  <a-input
                    v-model="form.billcode"
                    placeholder="请输入进场单编号"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="单据日期" class="form-col">
                  <a-input
                    v-model="form.billdate"
                    placeholder="请输入单据日期"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="单据状态" class="form-col">
                  <a-input
                    v-model="form.billStatusName"
                    placeholder="请输入单据状态"
                    :disabled="true"
                  />
                </a-form-model-item>

                <a-form-model-item label="申请人" class="form-col">
                  <a-input
                    v-model="form.creatorName"
                    placeholder="请输入申请人"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="申请部门" class="form-col" prop="deliveryPeople">
                  <a-input
                    v-model="form.deptName"
                    placeholder="请输入申请部门"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="进场日期" class="form-col" prop="deliveryPeople">
                  <a-input
                    v-model="form.billdate"
                    placeholder="请输入进场日期"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="进场门岗" class="form-col" prop="deliveryPeople">
                  <a-input
                    v-model="form.enterDoor"
                    placeholder="请输入场门岗"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="进场原因" class="form-col" prop="deliveryPeople">
                  <a-input
                    v-model="form.enterMeno"
                    placeholder="请输入进场原因"
                    :disabled="true"
                  />
                </a-form-model-item>
                <a-form-model-item label="车辆是否有牌" class="form-col">
                  <a-select
                    v-model="form.hasCardnum"
                    :showSearch="true"
                    allowClear
                    disabled
                    placeholder="请选择状态">
                    <a-select-option
                      :value="0"
                    >{{"有"}}
                    </a-select-option>
                    <a-select-option
                      :value="1"
                    >{{"没有"}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              <a-form-model-item label="车牌号码" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.carNumber"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="司机名称" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.driverName"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="驾驶证号码" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.driverLicense"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="行驶证上总重量" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.carWeight"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="毛重(kg)" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.grossWeight"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="车辆内尺寸" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.carInnerSize"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="车辆外尺寸" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.carOuterSize"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="车型底厚(米)" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.carThickness"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="备注" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.memo"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="单据类型编码" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.billtype"
                  :disabled="true"
                />
              </a-form-model-item>
              </div>
            </a-form-model>
          </div>
          <div class="printJS-item">
            <div class="infoTitle">进场单明细</div>
            <div class="tableWrap">
              <DataTable rowKey="phid" :showConfig="false" :tableData="Data" :tableColumn="tableColumn" />
            </div>
          </div>

          <!--   图片列表   -->
          <div class="printJS-item">
            <div class="infoTitle">图片列表</div>
            <div class="flex imgWrap">
              <a-upload
                list-type="picture-card"
                :file-list="fileList"
                @preview="handlePreview"
                @change="handleChange"
                disabled
              >
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancels">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </div>
          <!--
            v-if="+form.billstatus === 1" && power 当前用户是否有审批权限
            nextApprove: 是否还有下一个节点
            searchObj: 请求审批人参数
            approve: 同意
            refuse: 拒绝
          -->
          <Approve :searchObj="searchObj" @approve="approve" @refuse="refuse" />
          <ApproveSteps :searchObj="searchObj" />
        </div>
      </div>

      <CommonDialog
        :rows="rows"
        :form="dialogForm"
        title="审核"
        :visible="visible"
        @hideDialog="hideVisible"
        @confirm="confirmHandle()"
      />
      <CommonDialog
        width="600px"
        :showButton="false"
        :visible="preVisible"
        @hideDialog="preVisible = false"
      >
        <template #detail>
          <img :src="previewUrl" style="width: 100%">
        </template>
      </CommonDialog>

      <a-modal v-model="visiblePrinting" width="80%" :centered="true" :closable="false" :footer="null">
        <div class="printModalWrap" id="printModalWrap">
          <div class="print-title">{{form.orgName}}（收料单）</div>
          <div class="print-middle">
            <div class="middle-left">
              <div class="middle-left-item" v-if="form.projectName">项目名称：{{form.projectName}}</div>
              <div class="middle-left-item" v-if="form.deptName">申请部门：{{form.deptName}}</div>
              <div class="middle-left-item">单据编码：{{form.billcode}}</div>
            </div>
            <div class="middle-right">
              <img src="@/assets/images/v2_qscws7.png" alt="" class="logo-img" />
              <img :src="form.billcode" alt="" class="logo-img" />
            </div>
          </div>
          <div class="print-table">
            <!-- :expand="true" :defaultExpandAllRows="true"  -->
            <DataTable rowKey="phid" align="center" :expand="true" :defaultExpandAllRows="true" :border="true" :showConfig="false" :tableData="printTableData" :tableColumn="printTableColumn">
              <div slot="expand" slot-scope="record">抽查描述：{{record.data.dealReason?record.data.dealReason:'--'}}</div>
            </DataTable>
            <div class="print-table-bottom">
              <div class="table-bottom-left">
                <div style="margin-right: 20px;">验收人：{{form.approverName}}</div>
                <div>请购使用部门：
                  <template v-for="(item,index) in form.approverName">
                    <span style="padding-right:20px" :key="index">{{item}}</span>
                  </template>
                  <!-- <span style="padding-right:20px">{{form.vdef3Name}}</span> -->
                </div>
              </div>
              <div class="table-bottom-right">
                <div>审核人：{{form.approverName}}</div>
                <div>送货人签字</div>
              </div>
            </div>
          </div>
        </div>
        <div class="print-bottom">
          <a-button type="primary" @click="handlePrint" style="margin-right: 20px;">打印</a-button>
          <a-button type="dashed" @click="visiblePrinting = false">取消</a-button>
        </div>
      </a-modal>
    </a-spin>

  </div>

</template>
<script lang='ts'>
import { Confirm, Validate } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';
import print from 'print-js'

@Component
export default class approachInvoiceDetail extends Vue {
  searchObj: any = { // 审批组件参数
    phid: '', // 单据PHID
    phidProject: '', // 项目
    billtype: '' // 单据类型
  }
  isHttp:boolean = true
  spinning:boolean= false
  form: any = {};
  Data: any[] = [];
  pic_index:any = 0
  previewUrl:any = ''
  visiblePrinting:boolean = false
  tableListData:any[] = []
  myTableListData:any[] = []
  printTableData:any[] = []
  filedChecking:any=0
  preVisible2:boolean = false
  currentIndex:any = 0
  get tableColumn () {
    return {
      rowno: {
        label: '行号',
        width: 80
      },
      phidMaterial: {
        label: '物料编码',
        width: 140
      },
      matrialName: {
        label: '物料名称',
        width: 140
      },
      unitName: {
        label: '单位',
        width: 100
      },
      price: {
        label: '单价',
        width: 120
      },
      sgsName: {
        label: '收货商',
        width: 150
      },
      telephone: {
        label: '电话',
        width: 150
      }
    }
  }
  get printTableColumn () {
    return {
      materialsName: {
        label: '物料名称',
        width: 150
      },
      vdef1: {
        label: '存货备注',
        width: 150
      },
      unit: {
        label: '单位',
        width: 140
      },
      storageNumber: {
        label: '可入库数量',
        width: 150
      },
      sendOutNum: {
        label: '发货数量',
        width: 140
      },
      checkNum: {
        label: '实收数量',
        width: 150
      },
      checkQualityTitle: {
        label: '质量等级',
        width: 150
      }
      // checkMemo: {
      //   label: '抽查描述',
      //   width: 150
      // }
    }
  }
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  visible: boolean = false // 审核弹窗

  // dialog
  dialogForm: any = {
    checkStatus: 1,
    checkRemark: ''
  }
  get rows () {
    return {
      billstatus: {
        label: '审核状态',
        el: 'radio',
        option: [
          {
            label: '同意',
            value: true
          },
          {
            label: '驳回',
            value: false
          }
        ],
        rules: [
          { required: true, message: '请选择审核状态', trigger: 'change' }
        ]
      },
      memo: {
        el: 'textarea',
        label: '备注',
        placeholder: '请输入备注',
        rules: [
          { validator: this.remarkVali, trigger: 'blur' }
        ]
      }
    }
  }
  reCheckStepList:any[] = []
  reRen:any[] = []
  ysList:any[] = []
  ysState:any = ''
  reList:any[] = []
  reTime:any = ''
  ysTime:any = ''
  shList:any[] = []
  reState:any = 'no'
  shState:any = 'no'
  id: string = ''
  preVisible: boolean = false
  defaultList: any[] = []
  checkFileFour:any[] = []
  alias: string = '' // 当前页面状态
  billstatus: string = '0'
  isEdit: boolean = false // 重新编辑
  fileList:any = [] // 图片信息
  previewVisible: Boolean = false
  previewImage: any = ''
  // 是否可编辑
  get isInput () {
    return (['edit'].includes(this.alias) && ['0', '1'].includes(this.billstatus)) || this.isEdit
  }
  init () {
    const {_alias: alias, phid: id} = this.$route.query
    this.id = id as string
    this.alias = alias as string
    this.getDetail()
  }
  approve (obj: any) {
    console.log(obj)
    this.$api.storeApproveFetch({ ...obj, phid: this.searchObj.phid || this.id }).then((res: any) => {
      if (!res) return false;
      console.log(res, 1111111)
      this.$message.success('审批成功！')
    });
  }
  refuse (obj: any) {
    console.log(obj)
    this.$api.storeRefuseFetch({ ...obj, phid: this.searchObj.phid || this.id }).then((res: any) => {
      if (!res) return false;
      console.log(res, 1111111)
      this.$message.success('审批成功！')
    });
  }
  showImg (index:any) {
    this.$viewerApi({
      options: {
        initialViewIndex: index
      },
      images: [this.fileList.pic1, this.fileList.pic2, this.fileList.pic3, this.fileList.pic4]
    })
  }
  showImg2 (index:any, arr:any) {
    this.$viewerApi({
      options: {
        initialViewIndex: index
      },
      images: arr
    })
    // this.$hevueImgPreview({
    //   multiple: true,
    //   nowImgIndex: index,
    //   imgList: arr
    // })
  }
  handlePreView (url: string) {
    this.previewUrl = url
    this.preVisible = true
  }
  handlePreView2 (url: string, type:any) {
    this.previewUrl = url
    this.preVisible2 = true
    this.pic_index = type
  }

  // 获取验收进度
  getReCheckStep (id:any) {
    this.$api.checkReCheckStepFetch({deliveryId: id}).then(res => {
      if (res.data.length > 0) {
        this.reCheckStepList = res.data
        res.data.map((kk:any) => {
          if (kk.settingType === 'ys') {
            this.ysList.push(kk)
          } else if (kk.settingType === 're') {
            this.reList.push(kk)
            this.reRen.push(kk.checkMember)
          } else if (kk.settingType === 'sh') {
            this.shList.push(kk)
          }
        })

        if (this.ysList[0].checkStatus === 'ok') {
          this.form.deliveryStartEnd = this.form.deliveryStartEnd + '-' + this.ysList[0].checkTime.substring(11, 16)
        }

        console.log(this.ysList, 'this.ysListthis.ysListthis.ysList')

        if (this.ysList.every((item:any) => item.checkStatus === 'ok')) { // 表示全部验收
          this.ysState = 'ok'
          this.currentIndex = 0
        } else if (this.ysList.some((item:any) => item.checkStatus === 'no')) { // 表示有一个没验收成功
          this.ysState = 'no'
        } else if (this.ysList.some((item:any) => item.checkStatus === 'un')) { // 表示有一个未验收
          this.ysState = 'un'
        }

        if (this.reList.every((item:any) => item.checkStatus === 'ok')) { // 表示全部复验
          this.reState = 'ok'
          this.currentIndex = 1
          this.reTime = this.reList[this.reList.length - 1].checkTime
        } else if (this.reList.some((item:any) => item.checkStatus === 'no')) { // 表示有一个复验没过
          this.reState = 'no'
          this.currentIndex = 1
        } else if (this.reList.some((item:any) => item.checkStatus === 'un')) { // 表示有一个没复验
          this.reState = 'un'
          this.currentIndex = 1
        }

        if (this.shList.every((item:any) => item.checkStatus === 'ok')) { // 表示全部审核
          this.shState = 'ok'
          this.currentIndex = 2
        } else if (this.shList.some((item:any) => item.checkStatus === 'no')) { // 表示有一个审核没过
          this.shState = 'no'
          this.currentIndex = 2
        } else if (this.shList.some((item:any) => item.checkStatus === 'un') && this.reState === 'ok') { // 表示有一个没审核
          this.shState = 'un'
          this.currentIndex = 2
        } else if (this.shList.some((item:any) => item.checkStatus === 'un')) { // 表示有一个没审核
          this.shState = 'un'
        }
      }
    }).catch()
  }


  // 预览图片处理
  getBase64 (file: any) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
  // 关闭预览
  handleCancels () {
    this.previewVisible = false
  }

  // 打开预览
  async handlePreview (file: any) {
    if (!file.url && !file.preview) {
      file.preview = await this.getBase64(file.originFileObj);
    }
    this.previewImage = file.url || file.preview;
    this.previewVisible = true;
  }
  // 切换预览
  handleChange ({ fileList }: any) {
    this.fileList = fileList;
  }

  getDetail () {
    this.$api.approachDetailFetch({phid: this.id}).then(({ data }: any) => {
      this.billstatus = data.billstatus
      this.form.hasCardnum = Number(this.form.hasCardnum)
      data.fileStoreList.map((item: any) => {
        item.uid = item.fileId;
        item.name = 'image.png';
      })
      this.form = data.approachHeadVO // 基础信息
      this.fileList = data.fileStoreList // 图片列表
      this.Data = data.approachDetailVOList // 申请单明细
      this.form.hasCardnum = Number(data.approachHeadVO.hasCardnum);
      this.filedChecking = data.filedChecking
      this.searchObj = { // 审批组件参数
        phid: 'LC917811955241058304', // 单据PHID
        phidProject: '1001H2100000003KP094', // 项目
        billtype: 'FJ004' // 单据类型
      }
    })
  }
  handleSubmit (is_save: number) {
    // const flag = this.Data.every(item => item.taxFreePrice && item.taxRate)
    const flag = this.Data.every(item => item.taxFreePrice && item.taxRate >= 0)
    if (!flag) {
      return this.$message.error('请先表格中的无税单价和税率填写完整')
    }
    const data = {
      phid: this.id,
      dealApplyDetailVOList: this.Data,
      is_save
    }
    this.$api.dealApplyAddModifyFetch(data).then(() => {
      this.$message.success(`${is_save === 1 ? '保存' : '编辑'}成功`)
      this.$router.back()
    })
  }
  @Confirm('', ({ checkSn }: any) => {
    return new Promise((resolve, reject) => {
      resolve({ content: `确定撤回[${checkSn}]验收单吗?`, width: 550 })
    })
  })
  handleCancel ({ phid: id }: any) {
    this.$api.checkWithdrawPortFetch({ id, status: 'chehui' }).then(() => {
      this.$message.success('撤回成功')
      this.$router.back()
    })
  }
  @Confirm('', ({ checkSn }: any) => {
    return new Promise((resolve, reject) => {
      resolve({ content: `确定把[${checkSn}]的验收单推送NC吗?`, width: 550 })
    })
  })
  handlePush ({ phid: id }: any) {
    this.$api.checkWithdrawPortFetch({ id, status: 'nc' }).then(() => {
      this.$message.success('推送成功')
      this.$router.back()
    })
  }
  // dialog确定
  confirmHandle () {
    let that = this
    let checkStatus = 1
    if (this.dialogForm.checkStatus) {
      checkStatus = 1
    } else {
      checkStatus = 0
    }
    const data = {
      checkStatus: checkStatus,
      checkRemark: this.dialogForm.checkRemark,
      id: this.id
    }
    this.spinning = true
    this.visible = false
    // this.isHttp = false
    // const hide = this.$message.loading('审核中...', 2);
    this.$api.checkAuditStatusFetch(data).then(() => {
      // this.$message.success('审核成功')
      // this.$message.loading('审核成功', 1)
      this.spinning = false
      this.$message.success('审核成功')
      setTimeout(() => {
        // that.isHttp = true
        that.$router.back()
      }, 1000)
    }).catch(() => {
      // that.isHttp = true
      this.spinning = false
    })
  }
  // 隐藏dialog
  hideVisible () {
    this.visible = false
  }
  changePage (val: number) {
    this.pageConfig.current = val;
  }
  getList () {
    let data = {
      id: this.id
    };
    this.$api.deliveryDeliveryDetailFetch(data).then((res: any) => {
      this.Data = res.data.records;
    });
  }
  handlePrint () {
    const style = `@page { margin: 20px; } .flex {display: flex} @media print{}
        .printModalWrap{
          width: 100%;
          min-height: 500px;
          border: 1px solid #8a8a8a;
        }
        .print-title{
            line-height: 44px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            border-bottom: 1px solid #8a8a8a;
        }
        .print-middle{
          padding: 10px 15px;
          display: flex;
          border-bottom: 1px solid #8a8a8a;
        }
        .middle-left{
          width: calc(100% - 180px);
          display: flex;
          flex-wrap: wrap;
          font-size:8px;
        }
        .middle-left>div:nth-child(2n+1){
          width:55%;
        }
        .middle-left>div:nth-child(2n){
          width:45%;
        }
        .paperInvoice{
          display:flex;
        }
        .paper-label{
            font-size: 14px;
        }
        .paperInvoice>img{
          width: 150px;
          height: 150px;
        }
        .middle-left-item{
          line-height: 26px;
          padding-right: 10px;
        }
        .middle-right{
          width: 180px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
        .logo-img{
          width: 70px;
        }
        .print-table{
          padding: 10px 15px;
        }
        .print-table-bottom{
          line-height: 40px;
          display: flex;
          justify-content: space-between;
        }
        .table-bottom-left{
          display: flex;
        }
        .table-bottom-right{
          padding-right: 50px;
          display: flex;
        }
        .table-bottom-right>div{
          margin-left: 50px;
        }
      .form-row {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 200px;
      }
      .form-col {
        width: 48%;
        flex-shrink: 0;
      }
      .form-btn {
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .btn {
        margin: 10px 10px 0 0;
      }
      .ant-input-number, .ant-calendar-picker {
        width: 100%;
      }
      .ant-pagination {
        display: none
      }
    .infoTitle {
      margin-bottom: 20px;
      font-weight: 800;
      color: #000;
    }
    .ant-input[disabled] {
      color: #000;
    }
    `
    print({
      printable: 'printModalWrap',
      type: 'html',
      documentTitle: '',
      css: ['https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.css', ''],
      style: style,
      scanStyles: false
    })
  }
  remarkVali (rule: any, value: string, callback: any) {
    if (!this.dialogForm.checkStatus && !value.trim().length) {
      return callback(new Error('请填写驳回原因'))
    }
    callback()
  }

  // 改变获取输入的验收数量
  handleChangeNum (val: any) {
    // 无税金额 = 无税单价 * 订单数量
    val.norigMny = (Number(val.taxFreePrice) * Number(val.checkNum)).toFixed(2);
    val.taxInclusiveAmount = (Number(val.nqtorigTaxPrice) * Number(val.checkNum)).toFixed(2)

    val.taxesPrice = ((Number(val.nqtorigTaxPrice) - Number(val.taxFreePrice)) * Number(val.checkNum)).toFixed(2)
  }
  // 改变无税单价
  handleChangewsdj (val: any) {
    val.norigMny = (Number(val.taxFreePrice) * Number(val.checkNum)).toFixed(2);
    val.taxesPrice = ((Number(val.nqtorigTaxPrice) - Number(val.taxFreePrice)) * Number(val.checkNum)).toFixed(2)
  }
  // 改变税率
  handleChangehslv (val:any) {
    val.taxFreePrice = (Number(val.nqtorigTaxPrice) / (1 + Number(val.taxRate) * 0.01)).toFixed(2);
    val.norigMny = (Number(val.taxFreePrice) * Number(val.checkNum)).toFixed(2);
  }
  // 改变含税单价的值  norigMny
  handleChangehsdj (val:any) {
    // 无税单价 = 含税单价 / （1+税率）
    val.taxFreePrice = (Number(val.nqtorigTaxPrice) / (1 + Number(val.taxRate) * 0.01)).toFixed(2);
    val.norigMny = (Number(val.taxFreePrice) * Number(val.checkNum)).toFixed(2);
    val.taxInclusiveAmount = (Number(val.nqtorigTaxPrice) * Number(val.checkNum)).toFixed(2)
    val.taxesPrice = ((Number(val.nqtorigTaxPrice) - Number(val.taxFreePrice)) * Number(val.checkNum)).toFixed(2)
    console.log(val, '我是含税单价')
  }
}
</script>
<style lang='scss' scoped>
.form-btn {
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  z-index:999999;
  .btn {
    margin: 10px 10px 0 0;
  }
}
.wrap{
  // margin: 0 20px;
  min-width: 960px;
  min-height: calc(100vh - 203px);
  padding: 0 25px;
  #printJS-form{
    .printJS-item{
      background: #fff;
      margin-bottom: 20px;
      border-radius: 8px;
      .yszf_wrap{
        padding:30px 24px;
        display: flex;
        flex-wrap: wrap;
        div{
          margin-bottom: 10px;
        }
      }
      .stepWrap{
        padding:30px 24px;
        display: flex;
        .step-left{
          width: 58%;
          padding-right: 40px;
        }
        .step-right{
          border-left: 1px solid #ccc;
          padding: 4px 26px;
          color: rgba(0, 0, 0, 0.45);
          font-size:14px;
        }
      }
      .infoTitle{
        padding:24px;
        border-bottom: 1px solid #D8D8D8;
        font-size: 16px;
        color:#333333;
        font-weight: bold;
        position: relative;
        &::after{
          content: '';
          width: 4px;
          height: 20px;
          background: #437DFC;
          position:absolute;
          top:50%;
          left: 0;
          margin-top: -10px;
          border-radius: 6px;
        }
      }
      .form-row{
        padding: 24px 24px 14px;
        display: flex;
        flex-wrap: wrap;
        .form-col {
          width: 25%;
          flex-shrink: 0;
        }
      }
      /deep/ .ant-form-item{
        margin-bottom: 10px;
      }
      .tableWrap{
        padding:30px 24px
      }
      .table-wrap{
        width: 1000px;
        display:flex;
        flex-wrap: wrap;
        // margin-bottom: 20px;
        padding: 30px 24px;
        .table-item{
          width:33.33%;
          display: flex;
          align-items: center;
          line-height: 50px;
          border: 1px solid #d9d9d9;
          .item-label{
            padding: 0 8px;
            width: 122px;
            border-right: 1px solid #d9d9d9;
            background: rgb(244, 244, 244);
            font-weight: bold;
            text-align: center;
          }
          .item-right{
            padding: 0 8px;
            width: calc(100% - 122px);
          }
        }
      }
      .imgWrap{
        padding:0 24px;
        div{
          margin:0 20px 20px 0;
          .label{
            font-size: 14px;
            color: #000000;
          }
          .img-item{
            width:220px;
            height: 220px;
            margin: 10px 10px 10px 0;
          }
        }
      }
      .ysccWrap{
        padding:24px;
        .ysqk-item{
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          .label{
            color: #000000;
            font-size: 14px;
          }
          .ysqk-text{
            width: 1148px;
            height: 104px;
            margin-top: 10px;
            padding: 14px 20px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 14px;
            color: #000;
          }
        }
        .ysqk-img{
          display: flex;
          .ysqk-img-l{
            display: flex;
            flex-direction: column;
            div{
              display:flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
          .ysqk-img-r{
            display: flex;
            flex-direction: column;
            div{
              display: flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
        }
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
      .pic-wrap{
        padding:15px 24px 40px;
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
    }
  }
}
.printModalWrap{
  width: 100%;
  margin-bottom: 20px;
  // min-height: 500px;
  border: 1px solid #8a8a8a;
  .print-title{
    line-height: 44px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    border-bottom: 1px solid #8a8a8a;
  }
  .print-middle{
    padding: 10px 15px;
    display: flex;
    border-bottom: 1px solid #8a8a8a;
    .middle-left{
      width: calc(100% - 250px);
      display: flex;
      flex-wrap: wrap;
      .middle-left-item{
        width: 30%;
        line-height: 26px;
        padding-right: 10px;
      }
    }
    .middle-right{
      width: 250px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .logo-img{
        width: 80px;
      }
    }
  }
  .print-table{
    padding: 10px 15px;
    .print-table-bottom{
      line-height: 40px;
      display: flex;
      justify-content: space-between;
      .table-bottom-left{
        display: flex;
      }
      .table-bottom-right{
        padding-right: 50px;
        display: flex;
        div{
          margin-left: 50px;
        }
      }
    }
    .paperInvoice{
      display:flex;
      flex-wrap: wrap;
      .paper-label{
        font-size: 14px;
      }
      img{
        width: 150px;
        height: 150px;
        margin-right: 10px;
      }
    }
  }
}
.print-bottom{
  display: flex;
  justify-content: center;
}
.pic-wrap{
  display: flex;
  flex-wrap: wrap;
}
// .form-row {
//   display: flex;
//   flex-wrap: wrap;
//   .form-col {
//     width: 50%;
//     flex-shrink: 0;
//   }
// }
// .form-btn {
//   width: 100%;
//   display: flex;
//   justify-content: center;
//   .btn {
//     margin: 10px 10px 0 0;
//   }
// }
// .img-item {
//   width: 100px;
//   height: 100px;
//   margin: 0px 10px 10px 0;
// }
// .table-wrap{
//   border: 1px solid #d9d9d9;
//   width: 1000px;
//   display:flex;
//   flex-wrap: wrap;
//   margin-bottom: 20px;

//   .table-item{
//     width:50%;
//     display: flex;
//     align-items: center;
//     line-height: 50px;
//     border: 1px solid #d9d9d9;
//     .item-label{
//       padding: 0 8px;
//       width: 180px;
//       border-right: 1px solid #d9d9d9;
//       background: rgb(244, 244, 244);
//     }
//     .item-right{
//       padding: 0 8px;
//       width: calc(100% - 180px);
//     }
//   }
// }
.dif{
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}
/deep/ .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-description {
  max-width: 300px !important;
  white-space: normal;
}
.dialog_bottom{
  cursor: pointer;
  margin-top: 10px;
  width:100%;
  height:50px;
  display: flex;
  justify-content: center;
  align-items: center;
  div{
    display: flex;
    justify-content: center;
    align-items: center;

    .dialog_pic{
      width:48px;
      height:48px;
      margin-right: 10px;
    }
  }

}
</style>
